<template>
  <view class="user" >
    <view class="user-info" :style="{paddingTop:statusBarHeight+'px'}">
		<image src="../../static/logo.png" mode=""></image>
		<view class="username">{{userInfo.ip}}</view>
		<view class="area">来自：{{userInfo.address}}</view>
	</view>
	
	<view class="content box">
		<button class="item"  @click="goClassifyDetail('download')">
			<view>
				<image src="../../static/images/icons/download.png" mode=""></image>
				<text>我的下载</text>
			</view>
			<view>	
				<text>{{userInfo.downloadNum}}</text>
				<uni-icons type="right"></uni-icons>
			</view>
			
		</button>
		<button class="item" @click="goClassifyDetail('score')">
			<view>
				<image src="../../static/images/icons/collect.png" mode=""></image>
				<text>我的评分</text>
			</view>
			<view>	
				<text>{{userInfo.scoreNum}}</text>
				<uni-icons type="right"></uni-icons>
			</view>
			
		</button>
		<!-- #ifdef MP-WEIXIN -->
		<button class="item" open-type="contact">
			<view>
				<image src="../../static/images/icons/chat.png" mode=""></image>
				<text>联系客服</text>
			</view>
			<view>	
				<uni-icons type="right"></uni-icons>
			</view>
			
		</button>
		<!-- #endif -->
	</view>
	<view class="box">
		<button class="item" @click="goAnnouncementPage">
			<view >
				<image src="../../static/images/icons/remind.png" mode=""></image>
				<text>订阅更新</text>
			</view>
			<view>	
				<uni-icons type="right"></uni-icons>
			</view>
			
		</button>
		<button class="item" @click="goAnnouncementPage">
			<view>
				<image src="../../static/images/icons/flag.png" mode=""></image>
				<text>常见问题</text>
			</view>
			<view>	
				<uni-icons type="right"></uni-icons>
			</view>
			
		</button>
		
	</view>
  </view>
</template>

<script setup>
import { onBeforeMount } from 'vue';
import { request } from '../../utils';

const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
	
const userInfo = reactive({
	ip:'0.0.0.0',
	address:'',
	downloadNum:0,
	scoreNum:0
})

const goAnnouncementPage = ()=>{
	uni.navigateTo({
		url:'/pages/announcement/announcement?id=653507c6466d417a3718e94b'
	})
}

const goClassifyDetail = (type)=>{
	uni.navigateTo({
		url:'/pages/classifyDetail/classifyDetail?'+`type=${type}&name=${type==='download'?'我的下载':type==='score'?'我的评分':''}`
	})
}
/**
 * 获取个人信息
 */
const getUserInfo = ()=>{
	request({
		url:'https://tea.qingnian8.com/api/bizhi/userInfo'
	}).then(res=>{
		Object.assign(userInfo,{
			ip:res.data.IP,
			address:res.data.address.country + res.data.address.province + res.data.address.city,
			downloadNum:res.data.downloadSize,
			scoreNum:res.data.scoreSize
		})
	})
}

onShow(()=>{
	getUserInfo()
})
</script>

<style lang="scss" scoped>
.user{
	.user-info{
		width: 100%;
		height: 500rpx;
		background: url('../../static/images/headerBg.png') center/(100% 100%) no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image{
			width: 158rpx;
			height: 158rpx;
			border-radius: 50%;
		}
		.username{
			margin: 20rpx;
		}
		.area{
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.box{
		margin: 40rpx;
		border: 1px solid #EEEEEE;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx #eee;
		
		background-color: #fff;
		.item{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #F1F1F1;
			background: #fff;
			&:nth-last-child(1){
				border: none;
			}
			view{
				display: flex;
				align-items: center;
				image{
					width: 60rpx;
					height: 60rpx;
				}
				text{
					color: #666;
					font-size: 30rpx;
					margin: 0 20rpx;
				}
			}
		}
	}
	.content{
		margin-top: -60rpx;
	}
	
}
</style>